<template>
  <div class="w-full h-[64px] flex justify-start items-center border-bottom">
    <div class="w-[300px] ml-6 flex justify-start items-center">
      <div @click="goBack" class="cursor-pointer">
        <span> <icon-left /> </span>
        <span class="ml-3">登记维护</span>
      </div>
    </div>
  </div>
  <div class="w-full px-6">
    <div class="report-content">
      <a-row>
        <a-col :span="6" class="report-content-left">
          <div class="title">资源目录</div>
          <a-input-search v-model="searchValue" placeholder="请输入资产名称" allow-clear class="search-btn"
            @change="getAssetList" @search="getAssetList" @clear="getAssetList" />
          <div class="select-list">
            <div class="select-list-total">
              <span>已选{{ selectedKeys.length }}项</span>
              <span @click="handleCancel">取消</span>
            </div>
            <a-table row-key="id" :columns="columns" :data="tableData" :pagination="false" :row-selection="rowSelection"
              v-model:selectedKeys="selectedKeys" :scroll="{ maxHeight: '500px' }" @select="handleChange">
            </a-table>
            <div class="page-box w-full h-[40px] overflow-hidden flex justify-end items-center">
              <a-pagination :total="page.total" show-total show-page-size @page-size-change="handleSizeChange"
                @change="handleCurrentChange" />
            </div>
          </div>
        </a-col>
        <a-col :span="17" :offset="1" class="report-content-right">
          <div class="title">资产登记相关信息</div>
          <a-form ref="formRef" :model="form" class="report-form" :rules="Rules" :wrapper-col-props="{ span: 18, offset: 0 }"
            :label-col-props="{ span: 6, offset: 0 }" style="width: 600px;">
            <a-form-item field="number" label="批次编号">
              <a-input v-model="form.number" placeholder="请输入" />
            </a-form-item>
            <a-form-item field="name" label="批次名称">
              <a-input v-model="form.name" placeholder="请输入" />
            </a-form-item>
            <a-form-item field="asset_subject" label="资产主体">
              <a-select v-model="form.asset_subject" placeholder="请选择">
                <a-option value="1">资产主体1</a-option>
                <a-option value="2">资产主体2</a-option>
              </a-select>
            </a-form-item>
            <a-form-item label="统一社会信用代码" field="certificate_no">
              <a-input v-model="form.certificate_no" disabled></a-input>
            </a-form-item>
            <a-form-item field="application_time" label="申请时间">
              <a-date-picker v-model="form.application_time" style="width: 100%" placeholder="请输入" />
            </a-form-item>
            <a-form-item field="registration_time" label="登记时间">
              <a-date-picker v-model="form.registration_time" style="width: 100%" placeholder="请输入" />
            </a-form-item>
            <a-form-item field="certificate_no" label="证书编号">
              <a-input v-model="form.certificate_no" placeholder="请输入" />
            </a-form-item>
            <a-form-item field="certificate_hash" label="证书hash">
              <a-input v-model="form.certificate_hash" placeholder="请输入" />
            </a-form-item>
            <a-form-item field="certificate_file" label="上传文件">
              <SignUpload v-model="modelValue" :file-list="[]" file-name-key="file_origin_name"
                file-path-key="file_path" :extend-props="{
                  accept: '',
                  single: single,
                  startUpload: 'api/asset_registration/file/v2/prepare',
                  uploadPath: 'api/asset_registration/file/v2/upload',
                  mergePath: 'api/asset_registration/file/v2/merge'
                }" @uploaded="getFilesPath" @input="remove">
                <div class="upload-style">
                  <icon-cloud-download />
                  <div class="el-upload__text">点击或者拖动文件到虚线框内上传</div>
                  <div class="el-upload__type">支持扩展名：rar、zip、doc、docx、pdf、jpg…</div>
                </div>
              </SignUpload>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </div>
    <div class="common-footer">
      <a-button class="back" @click="goBack">取消</a-button>
      <a-button type="primary" @click="submitForm">确定</a-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import SignUpload from '@/views/file_upload_new/signUpload.vue';
import { pack_list, registration_Add } from '@/api/resource_registration/resource_registration';
import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const modelValue = ref('');
const getFilesPath = () => {
  if (single.value) {
    form.value.certificate_file = [];
  }
  form.value.certificate_file.push(modelValue.value);
  console.log(form.value);
};
const remove = () => {
  form.value.certificate_file.pop();
};
const single = ref(false);
const Rules = {
  number: [{ required: true, message: '请输入批次编号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入批次名称', trigger: 'blur' }],
  application_time: [{ required: true, message: '请选择申请时间', trigger: 'blur' }],
  registration_time: [{ required: true, message: '请选择登记时间', trigger: 'blur' }],
  certificate_no: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
  certificate_hash: [{ required: true, message: '请输入证书hash', trigger: 'blur' }]
};
const searchValue = ref('');
const selectedKeys = ref([]);
const formRef = ref(null);
const form: any = ref({
  number: '',
  name: '',
  application_time: '',
  registration_time: '',
  certificate_no: '',
  certificate_hash: '',
  asset_package_relation: [],
  certificate_file: []
});
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: true
});
const tableData = ref([]);
const page = ref({
  page: 1,
  page_size: 10,
  total: 0
});
const columns = [
  {
    title: '资产名称',
    dataIndex: 'name'
  },
  {
    title: '版本',
    dataIndex: 'version'
  }
];

/**
 * @method 获取资产列表
 */
const getAssetList = () => {
  const params = {
    page: page.value.page,
    page_size: page.value.page_size,
    name: searchValue.value
  };
  pack_list(params).then((res) => {
    const { data, total } = res;
    tableData.value = data;
    page.value.total = total;
  });
};
/**
 * @method 确定
 */
const submitForm = () => {
  console.log(form.value);
  formRef.value.validate((valid: Boolean) => {
    if (!valid) {
      if (form.value.asset_package_relation.length === 0) {
        Message.error('请选择资产包');
        return;
      }
      registration_Add(form.value).then((res) => {
        if (res.code === 200) {
          Message.success('创建成功');
          router.go(-1);
        } else {
          Message.error(res.message);
        }
      });
    }
  });
};
// 分页
const handleSizeChange = (e) => {
  page.value.page_size = e;
  getAssetList();
};
const handleCurrentChange = (e) => {
  page.value.page = e;
  getAssetList();
};
/**
 * 取消选择项
 */
const handleCancel = () => {
  selectedKeys.value = [];
};
/**
 * 表格数据变化
 */
const handleChange = (val: []) => {
  console.log(val);
  form.value.asset_package_relation = [];
  val.map((i) => {
    let item = tableData.value.find((elem) => elem.id === i);
    let params = {
      asset_package_code: item.code,
      asset_package_desc: item.describe,
      asset_package_name: item.name,
      asset_package_version: item.version
    };
    form.value.asset_package_relation.push(params);
  });
};
/**
 * @method 返回
 */
const goBack = () => {
  window.history.go(-1);
};
onMounted(() => {
  getAssetList();
});
</script>
<style lang="less" scoped>
:deep(.arco-table-tr .arco-table-td:hover) {
  background: #f0f4fa;
}

:deep(.arco-table-tr-checked .arco-table-td) {
  background: #e5effe;
}

.border-bottom {
  border-bottom: 1px solid #ebf0fa;
}

.report-content {
  padding: 0 16px;

  &-left {
    height: calc(100vh - 178px);
    border-right: 1px solid #ebf0fa;
    padding-right: 20px;

    .title {
      font-size: 16px;
      font-weight: 700;
      color: #394d73;
      padding-top: 20px;
      padding-left: 8px;
    }

    .search-btn {
      background: transparent;
      border: 1px solid #ebf0fa;
      border-radius: 4px;
      margin-top: 20px;
    }

    .select-list {
      margin-top: 14px;

      &-total {
        display: flex;
        font-size: 14px;
        color: #465a80;
        margin-left: 20px;
        margin-bottom: 14px;

        span:last-child {
          color: #1459fa;
          margin-left: 20px;
          cursor: pointer;
        }
      }
    }
  }

  &-right {

    // flex: 1;
    // padding-left: 20px;
    .title {
      font-size: 16px;
      font-weight: 700;
      color: #394d73;
      padding-top: 20px;
    }

    .report-form {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .upload-title {
      font-size: 14px;
      font-weight: 400;
      color: #394d73;
    }

    .upload-type {
      font-size: 14px;
      color: #86909c;
      margin-top: 9px;
      margin-bottom: 12px;
    }

    .upload-style {
      height: 148px;
      text-align: center;
      border: 1px dotted #d3dbeb;
      padding-top: 32px;
      padding-bottom: 32px;

      .arco-icon {
        font-size: 24px;
        color: #465a80;
      }
    }

    .el-upload__text {
      font-size: 14px;
      color: #465a80;
      margin-top: 10px;
    }

    .el-upload__type {
      font-size: 14px;
      color: #86909c;
      margin-top: 10px;
    }
  }
}

.common-footer {
  position: fixed;
  left: 220px;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: calc(100vw - 220px);
  height: 64px;
  background: #fff;
  box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
  padding-right: 24px;

  .back {
    margin-right: 12px;
  }
}

.page-box {
  margin-top: 15px;
}

.cursor-pointer {
  font-family: Microsoft YaHei;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  color: #394d73;
}
</style>
